<html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   </head>

<body>

<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script> 
var SimileAjax_urlPrefix = "http://static.simile.mit.edu/ajax/api-2.2.1/";
var Timeline_urlPrefix = "http://static.simile.mit.edu/timeline/api-2.3.0/";
</script> 
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>


<script type="text/javascript">
 var tl;

 function onLoad() {
   //SimileAjax.History.enabled = false;
   var bandInfos = [
     Timeline.createBandInfo({
         width:          "70%", 
         intervalUnit:   Timeline.DateTime.MONTH, 
         intervalPixels: 100
     }),
     Timeline.createBandInfo({
         width:          "30%", 
         intervalUnit:   Timeline.DateTime.YEAR, 
         intervalPixels: 200
     })
   ];
   tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
 }

 var resizeTimerID = null;
 function onResize() {
     if (resizeTimerID == null) {
         resizeTimerID = window.setTimeout(function() {
             resizeTimerID = null;
             tl.layout();
         }, 500);
     }
 }

 onLoad();
</script>
</body>
</html>
